<template>
<div class="page-container-padding">
  <div style="display:flex;">
    <div style="width:800px;margin-right:6px;">
    <el-form label-width="100px">
      <el-form-item label="日期"><el-date-picker :clearable="false" v-model="lectureObj.create_date" size="mini"></el-date-picker></el-form-item>
      <el-form-item label="标题"><el-input v-model.trim="lectureObj.title" size="mini" placeholder="填写路演项目的标题"></el-input></el-form-item>
      <el-form-item label="申请部门">
        <el-select v-model="lectureObj.applicant" size="mini">
          <el-option value="营业部" label="营业部"></el-option>
          <el-option value="非营业部" label="非营业部"></el-option>
          <el-option value="研究院" label="研究院"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路演类型">
        <el-select v-model="lectureObj.lecture_type" size="mini">
          <el-option value="T01" label="内部培训"></el-option>
          <el-option value="T02" label="企业培训"></el-option>
          <el-option value="T03" label="沙龙"></el-option>
          <el-option value="T04" label="线上报告会"></el-option>
          <el-option value="T05" label="线下报告会"></el-option>
          <el-option value="T06" label="尽调"></el-option>
          <el-option value="T99" label="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规模">
        <el-select v-model="lectureObj.lecture_scale" size="mini">
          <el-option value="S01" label="线上报告会"></el-option>
          <el-option value="S02" label="线下大型报告会(≥50人)"></el-option>
          <el-option value="S03" label="线下中小型报告会(<50人)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否交易所" prop="isExlib">
        <el-switch v-model="lectureObj.isExlib"></el-switch>
        <el-select
          v-show="lectureObj.isExlib"
          v-model="lectureObj.libName"
          placehold="交易所的，请选择哪家交易所"
          style="margin-left: 8px"
          size="mini"
        >
          <el-option label="中国金融期货交易所" value="CFE"></el-option>
          <el-option label="郑州商品交易所" value="CZC"></el-option>
          <el-option label="大连商品交易所" value="DCE"></el-option>
          <el-option label="上海期货交易所" value="SHF"></el-option>
          <el-option label="广州期货交易所" value="GFE"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="瑞币"><el-input v-model="lectureObj.swiss_coin" placeholder="瑞币数,合作完成的填写按人数均分后的值"></el-input></el-form-item>
      <el-form-item label="备注"><el-input v-model="lectureObj.note" size="mini" placeholder="其他备注说明"></el-input></el-form-item>
          <el-form-item label="附件">
            <el-upload
              action="''"
              :limit="1"
              :multiple="false"
              :before-upload="() => false"
              :on-change="annexFileChange"
            >
              <div class="el-upload__text">
                <em style="color: #0066ff">点击选择</em>
                (多文件请使用压缩包)
              </div>
            </el-upload>
            <span v-if="annexFilename">
              {{ annexFilename }}
              <i
                class="el-icon-delete-solid"
                style="color: #ff430d; margin-left: 20px; cursor: pointer"
                @click="annexFileRemove"
              ></i>
              <el-progress
                v-if="annexFile.savePercentage >= 0"
                :percentage="annexFile.savePercentage"
              />
            </span>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              :loading="submitLoading"
              @click="toAddMyLecture"
            >
              {{ submitBtnText }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 撰写说明 -->
      <div style="padding: 3px 5px; line-height: 22px; max-width: 450px">
        <span class="explain-title">一、工作说明</span>
        <br />
        演讲培训主要是针对公司各职能部门、业务部门、交易所、协会、媒体平台等业务支持的演讲工作。包括对新品种上市宣传培训、品种产业培训、行情分析讲课、交流会、尽调路演等，以网络报告会、现
        场报告会、论坛沙龙等方式呈现。
        <br><span class="explain-title">二、工作要求</span>
        <br>1、每个品种每 6 个月至少参加一场演讲培训活动，如无外部申请时，可自由发起策略路演活动。
        <br>2、课件制作数据图表要清晰、内容有深度有逻辑。演讲要充分准备，考虑听众感受，语言准确观点论证合理。
        <br>3、课件经领导审核后，提前发送给申请方或营业部。现场报告会及沙龙，要提前到指定地点做好讲课准备。网络培训在会议前联系好网络部管理员做好设备测试。
        <br>4、自主发起的注意录下来，后期交易所评选可用。
        <br>5、课件要上传至系统。
        <br>6、业务部门申请的，系统可自动纳入非常态任务的统计报表中。
        <br><span class="explain-title">三、考核评价</span>
        <br>1、演讲培训考核的内容主要包括数量、规模、效果。
        <br>2、效果，主要由部门指定审核人员或业务申请方根据课件美观度、数据、图表、逻辑深度以及讲课表现进行评价，达到四项要求的A、达到三项的 B，小于两项的 C 。
        <br>3、根据规模类型分为 A、B、C 三个等级（线上报告会 C、小于 50人的线下报告会 B、大于 50 人的线下报告会 A）
        <br>4、数量达标的先进行排名，根据规模和效果最终得出 A、B、C、D、E 五个等级（AA=A,AB=B,BB=C,AC=D,BC=E,CC=F[不合格]）。
      </div>
    </div>
  </div>
</template>

<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    addMyLecture,
    SliceUploadFile,
    MergeUploadFile,
  } from '@/api/departmentWork/lecture'
  export default {
    data() {
      return {
        lectureObj: {
          create_date: new Date(),
          title: '',
          applicant: null,
          lecture_scale: null,
          lecture_type: null,
          isExlib: false,
          libName: 'CFE',
          swiss_coin: 0,
          effect_flag: null,
          annex_file: null,
          note: '',
          insertId: -1,
        },
        annexFile: {
          savePercentage: -1,
          filename: '',
          fileSize: 0,
          raw: null,
        },
        annexFilename: '',
        submitBtnText: '确定保存',
        submitLoading: false,
      }
    },
    mounted() {},
    methods: {
      annexFileChange(file, fileList) {
        this.annexFilename = file.name
        this.lectureObj.annex_file = file.raw

        this.annexFile.filename = file.name
        this.annexFile.fileSize = file.size
        this.annexFile.raw = file.raw
        this.annexFile.savePercentage = 0
      },
      annexFileRemove() {
        this.lectureObj.annex_file = null
        this.annexFilename = ''

        this.annexFile.filename = ''
        this.annexFile.fileSize = 0
        this.annexFile.raw = null
        this.annexFile.savePercentage = -1
      },

      resetLectureObj() {
        this.lectureObj.title = ''
        this.lectureObj.applicant = null
        this.lectureObj.lecture_scale = null
        this.lectureObj.lecture_type = null
        this.lectureObj.effect_flag = null
        this.lectureObj.annex_file = null
        this.lectureObj.isExlib = false
        this.lectureObj.libName = 'CFE'
        this.lectureObj.note = ''
        this.annexFilename = ''
        
        this.annexFile.raw = null
      },
      async sliceUploadAnnex() {
        const fileSize = this.annexFile.fileSize // 文件大小
        const chunkSize = 512 * 1024 // 切片大小512kb
        const chunks = Math.ceil(fileSize / chunkSize) // 总块数
        // 将文件切片上传
        for (let i = 0; i < chunks; i++) {
          const start = i * chunkSize
          const end = Math.min(start + chunkSize, fileSize)
          const formData = new FormData()
          formData.append('chunk_index', i) // 块编号
          formData.append('chunk_count', chunks) // 总块数
          formData.append('chunk_data', this.annexFile.raw.slice(start, end)) // 块数据
          formData.append('file_name', this.annexFile.filename)
          await SliceUploadFile(formData)
          this.annexFile.savePercentage = parseFloat(
            (((i + 1) / chunks) * 100).toFixed(2)
          )
        }
      },

      // 添加路演记录
      async toAddMyLecture() {
        let formData = new FormData()
        const bodyData = {
          create_date: datetimeToStr(this.lectureObj.create_date, true, '-'),
          title: this.lectureObj.title,
          applicant: this.lectureObj.applicant,
          lecture_scale: this.lectureObj.lecture_scale,
          effect_flag: this.lectureObj.effect_flag,
          swiss_coin: this.lectureObj.swiss_coin,
          lecture_type: this.lectureObj.lecture_type,
          exchange: this.lectureObj.isExlib ? this.lectureObj.libName : 'NO',
          note: this.lectureObj.note,
          is_active: this.annexFile.raw ? 0 : 1,
        }
        formData.append('body_data', JSON.stringify(bodyData))
        // if (this.lectureObj.annex_file !== null) {
        //   formData.append('annex_file', this.lectureObj.annex_file)
        // }
        this.submitLoading = true
        this.submitBtnText = '正在保存'
        try {
          const res = await addMyLecture(formData)
        } catch {
          this.submitLoading = false
          this.submitBtnText = '确定保存'
          return
        }
        const res = await addMyLecture(formData)
        this.lectureObj.insertId = res.data.record_id
        if (res.code === 201 && this.annexFile.raw !== null) {
          // this.resetLectureObj()
          this.submitBtnText = '正在上传文件'
          await this.sliceUploadAnnex()
          this.submitBtnText = '正在保存文件'
          MergeUploadFile({
            file_name: this.annexFile.filename,
            row_id: this.lectureObj.insertId,
          }).then((mergeRes) => {
            this.submitBtnText = '保存完成'
            this.$baseMessage(mergeRes.msg, 'success')
            this.resetLectureObj()
            this.submitLoading = false
            this.submitBtnText = '确定保存'
          })
        } else {
          this.resetLectureObj()
          this.$baseMessage(res.msg, 'success')
          this.submitLoading = false
          this.submitBtnText = '确定保存'
        }
      },
    },
  }
</script>

<style scoped>
.explain-title{
  font-weight:700;
  color: #006eff;
}
</style>
